@import url('./base.less');
@vw: 3.75vw;
@color: #fb7299;

// 头部区域
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: (84 / @vw);
  background-color: #fff;
  // background-color: pink;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: (44 / @vw);
    padding-left: (18 / @vw);
    padding-right: (12 / @vw);
    // background-color: blue;

    .left {
      i {
        font-size: (29 / @vw);
        color: @color;
      }
    }

    .right {

      display: flex;

      .ic_search_tab {
        font-size: (22 / @vw);
        color: #ccc;
      }

      .login {
        overflow: hidden;
        width: (24 / @vw);
        height: (24 / @vw);
        background-color: aqua;
        margin-left: (24 / @vw);
        border-radius: 50%;
      }

      .download {
        width: (72 / @vw);
        height: (24 / @vw);
        margin-left: (20 / @vw);
      }
    }
  }

  .bottom {
    position: relative;
    display: flex;
    height: (40 / @vw);
    border-bottom: 1px solid #eee;

    .tabs {
      overflow: hidden;
      flex: 1;

      .tabs-list {
        display: flex;


        a {
          font-size: (14 /@vw);
          padding: 0 (16 /@vw);
          line-height: (40 / @vw);
          white-space: nowrap;

          // 交集选择器
          &.active {
            color: @color;
          }
        }

        .line {
          position: absolute;
          left: 0;
          bottom: 0;
          width: (28 / @vw);
          height: (2 / @vw);
          transform: translateX((16 / @vw));
          background-color: @color;
          border-radius: 1px;
        }
      }
    }

    .after {
      margin-top: (8/ @vw);
      width: (40 / @vw);
      height: (23 / @vw);
      // background-color: aqua;
      line-height: (23 / @vw);
      text-align: center;
    }
  }
}


// 主体

.main {
  padding-top: (84 / @vw);

  .main-list {
    display: flex;
    // 弹性盒子换行
    flex-wrap: wrap;

    a {
      width: 50%;
      padding: (8 / @vw) (5 / @vw);
      // background-color: aqua;
      font-size: (12 / @vw);
    }

    .pic {
      position: relative;
      width: (173 / @vw);
      height: (98 / @vw);

      // background-color: blue;
      .count {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: (5 /@vw) (6 /@vw);
        color: #fff;
        background-image: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);

        i {
          vertical-align: middle;
        }
      }
    }

    .txt {
      width: (173 / @vw);
      margin-top: (6 /@vw);
      color: #212121;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}